<template>
    <div style="height: 90px;">

        <template v-if="stepData == undefined || stepData == null || stepData.length == 0">
            <div style="text-align: center;color: gray;">无数据</div>
        </template>
        <template v-else>
            <div style="display: flex;flex-direction: row;">
                <div class="l-title">
                    <div style="height: 50px;">&nbsp;</div>
                    <div style="height: 20px;">计划时间</div>
                    <div style="height: 20px;">实际时间</div>
                </div>

                <div v-for="(item, index) in stepData" class="l-items">
                    <div class="l-item-top">
                        <div :class="index ==0 ?'l-item2':'l-item1'">&nbsp;</div>
                        <div :class="index == (stepData.length-1) ?'l-item2':'l-item1'">
                            <div style="margin-top: -10px;">
                                <span :class="(item.state==1?'l-state1': item.state==2?'l-state2':item.state==3?'l-state3':'l-state4') + ' l-item-state'">&nbsp;</span>
                            </div>

                        </div>

                    </div>
                    <div style="height: 20px;">{{ item.node }}</div>
                    <div style="height: 20px;">{{ item.planTime == '' ? '——' : item.planTime }}</div>
                    <div style="height: 20px;">{{ item.actualTime == '' ? '——' : item.actualTime }}</div>
                </div>

            </div>
        </template>


    </div>
</template>
    
<script>
export default {
    props: {
        stepData: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {

        };
    },
    created() {
        // //模板示例
        // this.stepData.push({
        //     state: 1,
        //     node: "基本信息1",
        //     planTime: "2023-01-01",
        //     actualTime: "2023-01-01"
        // })
        // this.stepData.push({
        //     state: 2,
        //     node: "基本信息2",
        //     planTime: "2023-01-01",
        //     actualTime: "2023-01-01"
        // })
        // this.stepData.push({
        //     state: 3,
        //     node: "基本信息3",
        //     planTime: "2023-01-01",
        //     actualTime: ""
        // })
        // this.stepData.push({
        //     state: 4,
        //     node: "基本信息4",
        //     planTime: "",
        //     actualTime: "2023-01-01"
        // })

        // console.log(this.stepData)
    },

    methods: {


    },
};
</script>
    
<style scoped>
.l-title {
    width:70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.l-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.l-item-top {
    height: 30px;
    display: flex;
    width: 100%;
}

.l-item1 {
    width: 50%;
    border-top: 2px solid #D7D7D7;
}

.l-item2 {
    width: 50%;
}

.l-item-state {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.l-state1 {
    background-color: #1FF343;
}

.l-state2 {
    background-color: #FF8A00;
}

.l-state3 {
    background-color: #FD2116;
}

.l-state4 {
    background-color: #AAAAAA;
}</style>